<div id="app">
    <template>
        <el-row :gutter="20">
            <el-col :span="3">
                <el-col :span="3">
                    <el-popconfirm title="是否确定批量删除？" @confirm='batchDel()'>
                        <el-button slot="reference" type="danger">删除</el-button>
                    </el-popconfirm>
                </el-col>
            </el-col>
            <el-col :span="21" style="text-align: right;float: right">
                <el-form :inline="true" label-width="80px">
                    <el-input placeholder="活动id" v-model="params.vote_id" style="width: 100px;"></el-input>
                    <el-input placeholder="作品id" v-model="params.person_id" style="width: 100px;"></el-input>
                    <el-input placeholder="弹幕内容" v-model="params.content" style="width: 300px;">
                        <el-button slot="append" icon="el-icon-search" @click="ChangePage(1)"></el-button>
                    </el-input>
                </el-form>
            </el-col>
        </el-row>

        <el-table
                ref="multipleTable"
                :data="list"
                border
                row-key="id"
                @selection-change="select"
                style="width: 100%;margin-top: 20px">
            <el-table-column
                    type="selection" reserve-selection
                    width="55" align="center">
            </el-table-column>
            <el-table-column
                    prop="vote.name"
                    label="活动名称" align="center">
            </el-table-column>
            <el-table-column
                    prop="person.name"
                    label="作品信息" align="center">
            </el-table-column>
            <el-table-column
                    prop="user.nickname"
                    label="用户昵称" align="center">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="弹幕内容" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-popconfirm title="是否确定删除？" @confirm='del(scope.row.id)'>
                        <el-button slot="reference" type="danger" icon="el-icon-delete" circle size="small"></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagination">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total" @current-change='ChangePage'>
            </el-pagination>
        </div>

    </template>
</div>

<script type="module">
    new Vue({
        el: '#app',
        data: function () {
            return {
                list: [],
                page: 1,
                total: 0,
                params: {
                    vote_id: "",
                    person_id: "",
                    content: '',
                },
                ids: []
            }
        },
        created() {
            this.params.vote_id = getParam('vote_id')
            this.ajax();
        },
        methods: {
            ajax() {
                this.params.page = this.page
                post('', this.params).then(res => {
                    this.list = res.data.rows;
                    this.total = res.data.total;
                })
            },
            ChangePage(page) {
                this.page = page
                this.ajax()
            },
            select(val){
                val.forEach(item => {
                    const id = item.id
                    //判断数组中是否包含某个值
                    if (this.ids.indexOf(id) === -1) {
                        this.ids.push(id)
                    }
                })
            },
            del(id){
                post('/kzvote/review/del', {id: id}).then(res => {
                    this.$message({
                        type: res.code === 1 ? 'success' : 'error',
                        message: res.msg
                    });
                    if (res.code === 1) {
                        this.ajax()
                    }
                })
            },
            batchDel(){
                this.del(this.ids.join(','))
            }
        }
    })
</script>
<style>
    .el-select {
        min-width: 120px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
        width: 50%;
    }
</style>